import React, { useEffect, useState, useCallback } from 'react';
import { isEmpty, timeLeft } from '@/utils/common';
import { ModalWrap } from '@/design';
import styles from '../checkorder.less';

export default function (props: any) {
  const { confirmRemarkVisiable } = props;
  const [formdata, setFormdata] = useState<any>({});
  
  const areaCodesTips: any = {
    T86: '請填寫11位有效的手機號碼',
    T886: '請填寫有效的手機號碼10碼',
    T852: '請填寫8位有效的手機號碼',
  };

  useEffect(()=>{
    setFormdata(props.formdata);
  }, [props.formdata])

  return (
    <ModalWrap headName={'外帶信息'} modalVisiable={confirmRemarkVisiable} onClickSure={props.onClickSure} onClose={props.onClose} noPadding>
      <>
        {isEmpty(formdata) ? null : <div className={styles.eating_way}>
        <div className={`${styles.remark_item}`}>
          <label>取餐姓名</label>
          <span className={styles.remark}>
            <input placeholder='請留下你的姓名方便取餐' defaultValue={formdata.comsumerName} onChange={e => {props.onChange(e, 'comsumerName')}}/>
          </span>
        </div>
        <div className={`${styles.remark_item}`}>
          <label>聯絡電話</label>
          <span className={styles.phone}>
            <button className={styles.area_code} type="button" onClick={props.onClickArea}>{formdata.phoneAreaCode}</button>
            <input placeholder={areaCodesTips[`T${formdata.phoneAreaCode}`]} defaultValue={formdata.comsumerPhone} onChange={e => {props.onChange(e, 'comsumerPhone')}} />
          </span>
        </div>
        <div className={`${styles.remark_item}`}>
          <label>訂單備註</label>
          <span className={styles.remark}>
            <input placeholder='填寫備註' defaultValue={formdata.orderRemark} onChange={e => {props.onChange(e, 'orderRemark')}} />
          </span>
        </div>
      </div>}
      </>
    </ModalWrap>
  )
}